<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>

<!--
     我们学过的指令：
        v-bind : 单向绑定解析表达式 ， 课简写为 :xxx
        v-model: 双向数据绑定
        v-for  : 遍历数组、对象、字符串
        v-on   : 绑定事件监听，简写为@
        v-if   : 条件渲染（动态控制节点为 是否存在）
        v-else : 条件渲染（动态控制节点为 是否存在）
        v-show : 条件渲染（动态控制节点是否展示）
        v-text :
            1.向其所在节点中渲染文本内容
            2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}不会


-->

<body>
<!-- 准备好 一个容器-->
<div id="root">
    <div>123  {{name}}  123</div>
<!--    v-text 会把name绑定的值替换成整个div ，div中的值没有任何意义-->
    <div v-text="name">  123  123</div>
</div>

</body>


<script type="text/javascript">

    Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。

    //创建Vue实例
    new Vue({
        el:'#root',
        data:{
            name:'itshumm',
            str:'<h3>你好</h3>'
        }
    })

</script>

</html>
